<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Editar</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/responsive.css" %}">
		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos.css" %}">
		{% load staticfiles %} <link rel="stylesheet" href="{% static "css/datepicker.css" %}">
		
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
	</head>

	<body>

		{% include "topmenu.html" %} <!-- Top menu -->
		<div class="container">
		<!--
			{% if exito %}
	            	<div class="alert alert-success">
	                  <button type="button" class="close" data-dismiss="alert">&times;</button>
	                  <strong>Guardado</strong> Los datos se guardaron correctamente
	                </div>
	        {% endif %}
			-->
			<div class="row-fluid">
				{% include "sidebar.html" %} <!-- Side bar -->
				<!-- Formulario de Buenas Practicas -->
				<div class="span9">
					
					{%if bp.dimension == 1 %}
						<div class="page-header">
							<h1>Formulario de Buenas Prácticas en Formación Continua</h1>
						</div>
					{%elif bp.dimension == 2%}
						<div class="page-header">
							<h1>Formulario de Buenas Prácticas en Transferencia de Conocimiento</h1>
						</div>
					{%else%}
						<div class="page-header">
							<h1>Formulario de Buenas Prácticas en Compromiso Social</h1>
						</div>
					{%endif%}
					<form action="/plataforma/buenaspracticas/editar/{{bp.id}}/" method="post" name="editarformulario" class="form-vertical"> {% csrf_token %}
						<div class="control-group">
							<table width="100%" cellpadding="10px" cellspacing="3px" >
								<tr>
									<th align="center">Fecha inicio:</th>
									<th align="center">Fecha fin: (opcional)</th>
								</tr>
								<tr>
									<th align="center"><input name="fecha_desde" id="fecha_desde" type="text" class="datePicker" data-date-format="dd/mm/yyyy" placeholder="dd/mm/aaaa" required ></input></th>
									<th align="center"><input name="fecha_hasta" id="fecha_hasta" type="text" class="datePicker" data-date-format="dd/mm/yyyy" placeholder="dd/mm/aaaa"></input></th>
								</tr>
							</table>
						</div>
						<div class="control-group">
							<label for="iniciativa" class="control-label">Nombre de la Iniciativa</label>
							<div class="controls">
								<textarea name="iniciativa" id="iniciativa" class="textarea.span5" cols="200" rows="2" placeholder="Ingrese el texto aquí" required>{{bp.iniciativa}}</textarea>
							</div>
						</div>
						
						<div class="control-group">
							<label for="objetivo" class="control-label">Descripción y Objetivo</label>
							<div class="controls">
								<textarea name="objetivo" id="objetivo" class="textarea.span5" cols="200" rows="3" placeholder="Ingrese el texto aquí" required>{{bp.objetivo}}</textarea>
							</div>
						</div>
						<div class="control-group">
							<label for="desarrollo" class="control-label">Ceración y Desarrollo</label>
							<div class="controls">
								<textarea name="desarrollo" id="desarrollo" class="textarea.span5" cols="200" rows="5" placeholder="Ingrese el texto aquí" required>{{bp.desarrollo}}</textarea>
							</div>
						</div>
						<div class="control-group">
							<label for="gobernanza" class="control-label">Gobernanza y Dependencia Institucional</label>
							<div class="controls">
								{% for g in bp.gobernanza.all %}
									<select name="{{g.id}}gtipo" id="{{g.id}}gtipo" required style="width:155px">
										{%if g.tipo == 1 %}
											<option value="1" selected="selected">Ente Público</option>
											<option value="2">Ente Privado</option>
										{%else%}
											<option value="1">Ente Público</option>
											<option value="2" selected="selected">Ente Privado</option>
										{%endif%}
									</select>
									<input type="text" name="{{g.id}}gdescriptcion" id="{{g.id}}gdescriptcion" placeholder="ingrese una descipción" class="span8" style="margin-left:10px"  required value="{{g.descriptcion}}"></input>
									<input type="button" class="btn btn-danger" id="gbtn{{g.id}}" value="Eliminar" onclick="del_M2M('g','{{g.id}}')" style="margin-bottom:10px"/>
								{%endfor%}
								
								<input type="hidden" id="gdescriptcion1"></input>
							</div>
							<div>
						        <input type="button" class="btn btn-default" id="btnAddg" value="Agregar" onclick="addg()" />
						        <input type="button" class="btn btn-default" id="btnDelg" value="Remover" onclick="delg()" />
						    </div>
						</div>
						<div class="control-group">
							<label for="fases" class="control-label">Procesos o Fases que se siguen para gestionar adecuadamente esta actividad</label>
							<div class="controls">
								<textarea name="fases" id="fases" class="textarea.span5" cols="200" rows="7" placeholder="Ingrese el texto aquí" required>{{bp.fases}}</textarea>
							</div>
						</div>
						<div class="control-group">
							<label for="participantes" class="control-label">Participantes Involucrados</label>
							<div class="controls">
								{% for p in bp.participantes.all %}
									<input type="number" name="{{p.id}}cantidad" id="{{p.id}}cantidad" placeholder="Cantidad" class="span2" required value="{{p.cantidad}}"></input>
									<input type="text" name="{{p.id}}grado" id="{{p.id}}grado" placeholder="ingrese una descipción" class="span8" style="margin-left:10px"  required value="{{p.grado}}"></input>
									<input type="button" class="btn btn-danger" id="pbtn{{p.id}}" value="Eliminar" onclick="del_M2M('p','{{p.id}}')" style="margin-bottom:10px" />
								{%endfor%}
								<input type="hidden" id="grado1"></input>
							</div>
							<div>
						        <input type="button" class="btn btn-default" id="btnAddp" value="Agregar" onclick="addp()" />
						        <input type="button" class="btn btn-default" id="btnDelp" value="Remover" onclick="delp()" />
						    </div>
						</div>
						<div class="control-group">
							<label for="financiacion" class="control-label">Finaniación (Relación Coste-Beneficio)</label>
							<div class="controls">
								{% for f in bp.financiacion.all %}
									<select name="{{f.id}}ftipo" id="{{f.id}}ftipo" required style="width:155px">
										{%if f.tipo == 1 %}
											<option value="1" selected="selected">Ente Público</option>
											<option value="2">Ente Privado</option>
										{%else%}
											<option value="1">Ente Público</option>
											<option value="2" selected="selected">Ente Privado</option>
										{%endif%}
									</select>
									<input type="text" name="{{f.id}}fdescriptcion" id="{{f.id}}fdescriptcion" placeholder="ingrese una descipción" class="span8" style="margin-left:10px"  required value="{{f.descriptcion}}"></input>
									<input type="button" class="btn btn-danger" id="fbtn{{f.id}}" value="Eliminar" onclick="del_M2M('f','{{f.id}}')" style="margin-bottom:10px"/>
								{%endfor%}
								<input type="hidden" id="fdescriptcion1"></input>
							</div>
							<div>
						        <input type="button" class="btn btn-default" id="btnAddf" value="Agregar" onclick="addf()" />
						        <input type="button" class="btn btn-default" id="btnDelf" value="Remover" onclick="delf()" />
						    </div>
						</div>
						<div class="control-group">
							<label for="factores" class="control-label">Factores de Éxito</label>
							<div class="controls">
								<textarea name="factores" id="factores" class="textarea.span5" cols="200" rows="3" placeholder="Ingrese el texto aquí" required>{{bp.factores}}</textarea>
							</div>
						</div>
						<div class="control-group">
							<label for="valoracion" class="control-label">Valoración sobre su impacto en la Universidad</label>
							<div class="controls">
								<textarea name="valoracion" id="valoracion" class="textarea.span5" cols="200" rows="3" placeholder="Ingrese el texto aquí" required>{{bp.valoracion}}</textarea>
							</div>
						</div>
						<div class="control-group">
							<label for="indicadores" class="control-label">Resultados / Indicadores Disponibles</label>	
							<div class="contols">
								{{indhtml | safe}}
							</div>						
						</div>
						
						<div class="form-actions">
							<button type="submit" class="btn btn-primary">Guardar</button>
						</div> 
					</form>
					
				</div><!-- Fin span9-->
			</div>
			<!-- Fin row -->
			{% include "footer.html" %} <!-- Footer -->
		</div>
		<!-- /container -->
		<!-- JS files -->
		{% load staticfiles %}
		<script type="text/javascript" src="{% static "js/jquery-1.10.2.min.js" %}"></script>
		{% load staticfiles %}
		<script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
		{% load staticfiles %}
		<script type="text/javascript" src="{% static "js/bootstrap-datepicker.js" %}"></script>
		        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>
		<script>
			$(function() {
			$(".datePicker").datepicker();
			});
		</script>
		<script type="text/javascript">
			$(function(){
				var aux_desde= new Date();
				aux_desde.setTime(Date.parse("{{f_desde}}")+86400000);
				$('#fecha_desde').val((aux_desde.getDate()).toString().concat('/',(aux_desde.getMonth()+1).toString(),'/',aux_desde.getFullYear().toString()))
				if ({{f_hasta}}){
					var aux_hasta= new Date();
					aux_hasta.setTime(Date.parse("{{f_hasta}}")+86400000);
					$('#fecha_hasta').val((aux_hasta.getDate()).toString().concat('/',(aux_hasta.getMonth()+1).toString(),'/',aux_hasta.getFullYear().toString()))
				}
				
			})
		</script>
		{% load staticfiles %} <script type="text/javascript" src="{% static "js/botones.js" %}"></script>
		<script type="text/javascript">
			function del_M2M(tipo, tipoid){
				$.ajax({ 
					type : "POST", 
					url : '/plataforma/buenaspracticas/ajax_del/', 
					data : { 'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value,
							'tipo' : tipo,
							'tipoid' :  tipoid,
							'bpid' : "{{bp.id}}",}, 
					success : function(respuesta) { 
								if(respuesta=="Exito"){
									if(tipo=='g'){
										var nombre1=tipoid.toString().concat('gtipo');
										var nombre2=tipoid.toString().concat('gdescriptcion');
										var nombre3="gbtn".concat(tipoid.toString());
										$('#'.concat(nombre1)).remove();
										$('#'.concat(nombre2)).remove();
										$('#'.concat(nombre3)).remove();
									}
									if(tipo=='f'){
										var nombre1=tipoid.toString().concat('ftipo');
										var nombre2=tipoid.toString().concat('fdescriptcion');
										var nombre3="fbtn".concat(tipoid.toString());
										$('#'.concat(nombre1)).remove();
										$('#'.concat(nombre2)).remove();
										$('#'.concat(nombre3)).remove();
									}
									if(tipo=='p'){
										var nombre1=tipoid.toString().concat('cantidad');
										var nombre2=tipoid.toString().concat('grado');
										var nombre3="pbtn".concat(tipoid.toString());
										$('#'.concat(nombre1)).remove();
										$('#'.concat(nombre2)).remove();
										$('#'.concat(nombre3)).remove();
									}
								}
							 } 
					}
				);
			};
		</script>

	
	</body>
</html>
